解决vuex数据页面刷新后初始化问题

在vue项目的开发中经常会用到vuex来进行数据的存储,然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题!下面是我用过的解决方法

  1. 利用storage缓存来实现vuex数据的刷新问题
    我们可以在mutation等vuex的方法中对于数据进行改变时,将数据同时存储进我们的本地浏览器缓存中;下面是我在mutation中写的方法;
    这里写图片描述
    同步将数据的更改保存,也可以在页面调用vuex的mutation方法时同步更改;但是这种方法只能针对少量的数据需要保持不刷新,在真正的卡发中并不适用

  2. 利用已有的插件来进行保存新状态
    一致的插件中,我目前使用的是vuex-along插件,该插件使用非常方便简洁。
    这里写图片描述

通过 cnpm i vuex-along -D下载插件,在进行引入,在store里面通过plugin来使用,这样就能将所有的state的数据都进行保存,不回应为刷新而更改,当然如果你想仅对某些数据进行保存,也可以使用对应的插件的api来实现,具体的api请看github;https://github.com/boenfu/vuex-along

上面的代码仅为展示vuex-along插件的使用,项目的真实写法并不规范,对于一般项目会将vuex的每个模块独立拆分出来,分别进行管理
这里写图片描述
同时在项目中我们也都尽量使用辅助函数来实现vuex的管理,而不会应用原生的写法
这里写图片描述
对于state和getter的数据可以在计算属性中来因够用。而mutation和action则在methods方法应用;如果你需要修改计算属性,现在需要设置对应的setter。

以上纯属自己的一点意见,如果需要请采纳!
  • 5
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值